<template>
    <div class="eldialog_box">
        <el-dialog
         title="提供您的基本信息，一个工作日内会有专业的老师联系您。"
         :visible.sync="dialogVisible"
         width="30%"
         @close="computedFlag"
        >
         <div class="form_box">
             <el-form ref="form" :model="form" status-icon :rules="rules">
                 <el-form-item label="姓名" prop="name">
                     <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                     <el-input v-model.number="form.age"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="phone">
                     <el-input v-model.number="form.phone"></el-input>
                </el-form-item>
             </el-form>
         </div>
         <span slot="footer" class="dialog-footer">
            <el-button @click="computedFlag">取 消</el-button>
            <el-button type="primary" @click="sendRes">确 定</el-button>
        </span>
       </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'
 import qs from 'qs'
    export default {
        props: ['flaginfo'],
        data () {
            // 自定义验证规则
            var checkAge = (rule, value, callback) => {
                if(!value)return callback(new Error('年龄不能为空'));
                    if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                    } else {
                    if (value < 18 || value > 120) {
                    callback(new Error('您输入的年龄要误请重新输入'));
                     } else {
                     callback();
                 }
            }
            };
            var checkPhone = (rule, value, callback) => {
                if(!value) return callback(new Error('手机号码不能为空'))
                if(!(/^1[3456789]\d{9}$/.test(value))) {
                    return callback(new Error('手机号码不正确'))
                }else {
                     callback();
                }
            };
            return {
                 form: {
                    name: '',
                    age: '',
                    phone: ''
                },
                dialogVisible: this.flaginfo,
                rules: {
                    name: [
                        { required: true, message: '请输入您的姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    age: [
                        { validator: checkAge,trigger: 'blur'},
                        { required: true,trigger: 'blur', message: '请输入您的年龄'}
                    ],
                    phone: [
                        {required: true, trigger: 'blur',message: '电话号码不能为空'},
                        { validator: checkPhone, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            computedFlag (){
                // 原则要在父级修改数据
              this.dialogVisible = false
              this.$emit('showModalInGloble',false)
              // 清空表单 取消关闭清空表单
              this.$refs.form.resetFields()
            },
            // 验证通过发送请求
            async sendRes () {
                // 判断数据验证结果
                const flag = await this.$refs.form.validate()

                if(flag){
                    // 拿到数据发起请求
                   const { name, age, phone} = this.form
                   axios({
                     url: 'clientServlet',
                     method: 'POST',
                     headers: { 'content-type': 'application/x-www-form-urlencoded' },
                     data: qs.stringify({ 'cname': name,'age' : age, 'telephone':phone})
                   }).then(info => {
                       if(info.data.flag){
                           alert("提交成功")
                       }else {
                            alert(info.data.errorMsg)
                       }
                   }).catch (er => {
                       console.log(er)
                       alert("操作失败")
                   })
                   // 关闭框
                   this.dialogVisible = false
                //    this.$refs.form.resetFields()
                }
            }
        }
       
    }
</script>

<style lang="less" scoped>
@basesize: 114.3rem;
 .eldialog_box{
     /deep/ .el-dialog__header{
         height: 50/@basesize;
         line-height: 50/@basesize;
         .el-dialog__title{
             font-size: 18/@basesize;
             display: block;
         }
         .el-dialog__body{
             padding-top: 0;
         }
     }
 }
</style>